<%--
  Created by IntelliJ IDEA.
  User: linxi
  Date: 2020/12/13
  Time: 10:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8"/>
    <title>table模块快速使用</title>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all"/>
</head>
<body>
<div class="layui-container">
    <table id="demo" lay-filter="test"></table>
</div>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-group">
        <button
                type="button"
                class="layui-btn layui-btn-normal"
                lay-event="add"
        >
            <i class="layui-icon">&#xe654;</i>增加
        </button>
        <button type="button" class="layui-btn ">
            <i class="layui-icon">&#xe642;</i>编辑
        </button>
        <button type="button" class="layui-btn layui-btn-danger">
            <i class="layui-icon ">&#xe640;</i>删除
        </button>
    </div>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"
    >删除</a
    >
</script>
<script src="/layui/layui.js"></script>
<script>
    layui.use("table", function () {
        var table = layui.table;

        //第一个实例
        table.render({
            elem: "#demo",
            height: 530,
            url: "/ShowServlet", //数据接口
            toolbar: "#toolbarDemo", //开启头部工具栏，并为其绑定左侧模板
            page: true, //开启分页
            cols: [
                [
                    //表头
                    {type: "checkbox"},
                    {field: "id", title: "ID", width: 80, sort: true},
                    {field: "name", title: "name", width: 80},
                    {field: "email", title: "email", width: 180},
                    {field: "balance", title: "balance", width: 80},
                    {
                        fixed: "right",
                        title: "操作",
                        toolbar: "#barDemo",
                        width: 150,
                    },
                ],
            ],
        });
        //监听行工具事件
        table.on("tool(test)", function (obj) {
            var data = obj.data;
            //console.log(obj)
            if (obj.event === "del") {
                layer.confirm("真的删除行么", function (index) {
                    // const id = obj.data.id;
                    // window.location.href = "/deleteCustomer?id=" + id;
                    // layer.close(index);
                    var id = obj.data.id;
                    var $ = layui.jquery;
                    $.ajax({
                        url: "/deleteCustomer?id=" + id,
                        type: "POST",
                        success: function (msg) {
                            if (msg) {
                                //删除这一行
                                obj.del();
                                //关闭弹框
                                layer.msg("删除成功", { icon: 6 });
                            } else {
                                layer.msg("删除失败", { icon: 5 });
                            }
                        },
                        error: function() {
                            layer.msg("删除失败", { icon: 5 });
                        }
                    });
                    layer.close(index);
                });
            } else if (obj.event === "edit") {
                layer.prompt(
                    {
                        formType: 2,
                        value: data.username,
                    },
                    function (value, index) {
                        obj.update({
                            username: value,
                        });
                        layer.close(index);
                    }
                );
            }
        });
        table.on("toolbar(test)", function (obj) {
            switch (obj.event) {
                case "add":
                    alert(11);
                    break;
                default:
                    break;
            }
        });
    });
</script>
</body>
</html>

